<template>
  <div
    :class="['left_item_container',{'leftactive':selectIndex===index}]"
    @click="onClick"
  >{{item.cname}}</div>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      required: true,
    },
    selectIndex: {
      //选择的下标
      type: Number,
    },
    index: {
      // 当前点击下标
      type: Number,
    },
  },
  methods: {
    onClick() {
        // 点击事件  
        // 触发父组件中的函数
      this.$emit("changeSelectIndex", this.index);
    },
  },
};
</script>

<style scoped>
.left_item_container {
  width: 100%;
  height: 0.6rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 0.35rem;
}

.leftactive {
  border-left: 0.01rem solid black;
}
</style>